const path = require("path");
const nodeExternals = require("webpack-node-externals");
const webpack = require("webpack");
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "development", // production
  // JS 执行入口文件
  entry: "./main_browser.js",
  // 为了不把 Node.js 内置的模块打包进输出文件中，例如 fs net 模块等
  target: "web",
  // 为了不把 node_modules 目录下的第三方模块打包进输出文件中
  //   externals: [nodeExternals()],
  output: {
    // 为了以 CommonJS2 规范导出渲染函数，以给采用 Node.js 编写的 HTTP 服务调用
    // libraryTarget: "commonjs2",
    // 把最终可在 Node.js 中运行的代码输出到一个 bundle_server.js 文件
    filename: "bundle_browser.js",
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, "./dist"),
  },
  devServer: {
    hot: true,
    open: true,
    // publicPath: path.join(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ["babel-loader"],
        exclude: path.resolve(__dirname, "node_modules"),
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new htmlWebpackPlugin({
      template: "./index.html",
      filename: "index.html",
    }),
  ],
  resolve: {
    // 将 `.ts` 添加为一个可解析的扩展名。
    extensions: [".js", ".jsx", ".tsx", ".json"],
  },
  devtool: "source-map", // 输出 source-map 方便直接调试 ES6 源码
};
